<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <link rel="stylesheet" href="{__SGHOME_PATH}css/reset.css"/>
    <link rel="stylesheet" href="{__SGHOME_PATH}css/ticket-cancel.css"/>
    <title>无卡通行</title>
    <script type="text/javascript" src="{__SGHOME_PATH}js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="{__SGHOME_PATH}js/qrcode.min.js"></script>
    <script type="text/javascript" src="{__SGHOME_PATH}js/vconsole.min.js"></script>
    <script>
        var deviceWidth = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
        {if in_array($homeuser_info.user_id,[96005618,15014038])}
        var vConsole = new window.VConsole();
        {/if}
    </script>
    <style>
        *{ font-family: "microsoft yahei", arial, helvetica, sans-serif; box-sizing: border-box; }
        input,select{
            width: 6.8rem; height: 1rem; color: #333; border: 1px solid #dcdcdc; background: #fff; border-radius: 0.1rem; display: block; margin: 0 auto; box-sizing: border-box; padding-left: 1.18rem;
        }
        .logo{
            width: 7.5rem; margin:0 auto 0.45rem;
        }
        .store{
            width:7.5rem;  text-align:center; position:relative; color: #666666; font-size: 0.3rem; margin-top: 0.18rem;
        }
        .line{
            background:#c9c9c9;
            content:"";
            height:1px;
            top:50%;
            width:100%;
        }
        .line{ left:10px; }
        .storeName{
            background: #fff; padding: 0 0.3rem; height:0.36rem; width:auto; display:inline-block !important; position: relative; top: -0.19rem;
        }
        .btn{
            margin-top: 0.8rem; display: flex; /*justify-content: space-around;*/ padding: 0 0.32rem; flex-wrap: wrap;
        }
        .btn a {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 0 0 25%;
            margin-bottom: 10px;
        }
        .btn img{
            cursor: pointer; width: 1.55rem; margin:0 0.7rem 0.3rem 1rem;
            border: 1px solid rgba(0,0,0,.1);
            border-radius: 15px;
        }
        .btn span{
            margin-bottom: 40px;
            text-align: center;
            font-size: 18px;
            font-weight: bolder;
            color: #333;
        }
        .overflow{
            position: fixed; top: 0 ;bottom: 0; right: 0; left: 0; background: rgba(0,0,0,0.7); display: flex; justify-content:center; align-items: center;
        }
        .qr{
            width: 6.4rem; height: 7.3rem; background: #fff; text-align: center; padding-top: 0.42rem; border-radius: 0.08rem; overflow: hidden; position: relative;
        }

        .qrtext{
            font-size: 0.3rem; color: #3271FD; margin-bottom: 0.32rem; font-weight: bolder;
        }
        .qr img{
            padding: 0.28rem; background: #fff; box-sizing: content-box; width: 5.25rem; box-shadow: 0px 0px 0.15rem 0.04rem rgba(224, 224, 224, 0.66);
        }

        .qr canvas{
            padding: 0.28rem; background: #fff; box-sizing: content-box; width: 5.25rem; box-shadow: 0px 0px 0.15rem 0.04rem rgba(224, 224, 224, 0.66);
        }
        #qrcode img{
            padding: 0.28rem; background: #fff; box-sizing: content-box; width: 5.25rem; box-shadow: 0px 0px 0.15rem 0.04rem rgba(224, 224, 224, 0.66);
        }
        #qrcode canvas{
            padding: 0.28rem; background: #fff; box-sizing: content-box; width: 5.25rem; box-shadow: 0px 0px 0.15rem 0.04rem rgba(224, 224, 224, 0.66);
        }
        .close{
            font-size: 0.5rem;width: 1.06rem;background:#b4b4b4;color:#fff;position:absolute;top: -0.1rem;right: -0.38rem;transform: rotate(45deg);height: 0.56rem; cursor: pointer;
        }
        .slogan {
            position: absolute;
            top: 66px;
            left: -36px;
            font-size: 26px;
            font-weight: 800;
            color: #FDDB55;
            text-shadow: 1px 1px 2px black;
        }
        .slogan .ftitle{
            display: block;
            font-size: 22px;
            font-weight: 400;
            color: #ffffff;
            margin-top: 5px;
            margin-left: 60px;
        }
    </style>
</head>
<body>
<body style="background-color:#fff; width:7.5rem; text-align: center;">

<div class="banner">
    <div class="slogan">绿城无卡通行<span class="ftitle">开启数字化通行新时代</span></div>
    <img class="logo" src="{__SGHOME_PATH}images/banner.png" alt="">
</div>

<div class="store">
    <div class="line"></div>
    <div class="storeName">{$homeuser_info.username}，欢迎您！</div>
</div>
<div class="btn">
    <a href="javascript:;" class="qdqrcode"><img src="{__SGHOME_PATH}images/pass_card.png" alt=""><span>&nbsp;&nbsp;&nbsp;一码通</span></a>
    <a href="{:url('index/visitor')}"><img src="{__SGHOME_PATH}images/visitor_appointment.png" alt=""><span>&nbsp;&nbsp;&nbsp;访客邀约</span></a>
    <a href="{:url('index/face')}"><img src="{__SGHOME_PATH}images/face_door.png" alt=""><span>&nbsp;&nbsp;&nbsp;人脸识别</span></a>
    <a style="display:none;" href="https://printc.gtcloud.cn/_app/?app_id=cli_a51892f2b5a3900e#/"><img src="{__SGHOME_PATH}images/gongwen.png" alt=""><span>&nbsp;&nbsp;&nbsp;云打印</span></a>
    <a style="display:none;" href="javascript:;"><img src="{__SGHOME_PATH}images/addMore.png" alt=""><span>&nbsp;&nbsp;&nbsp;敬请期待</span></a>
</div>
<div class="overflow" style="display: none;">
    <div class="qr">
        <div class="close">+</div>
        <div class="qrtext"><span style="font-size: 12px;color: #ccc;">每隔30秒自动刷新</span><span class="refresh" style="font-size: 14px;padding-left: 5px;">刷新</span></div>
        <div id="qrcode"></div>
    </div>
</div>
<input id="text" type="text" value="{$unifyqrcode}" style="display: none;" />
</body>
<script type="text/javascript" src="{__SGHOME_PATH}js/h5-js-sdk-1.5.16.js"></script>
<script>
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 400,
        height : 400
    });
    var hex_data = "{$ladderqrcodeinfo.hex_data}";
    function makeCode () {
        var elText = document.getElementById("text");
        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }
        console.log(elText.value);
        console.log(hex_data);
        qrcode.makeCode(elText.value);
        $("#qrcode canvas").removeAttr("style");
        $("#qrcode img").css("display","none")
    }

    function refreshCode() {
        $.ajax({
            url: "{:url('index/getqrcodeinfo')}",
            dataType: 'json',
            type:'get',
            data:{},
            success: function(drs){
                // console.log(drs);
                console.log(drs.data.unifyqrcode);
                hex_data = drs.data.hex_data;
                console.log(hex_data);
                // return false;
                var elText = document.getElementById("text");
                elText.value = drs.data.unifyqrcode;
                qrcode.makeCode(drs.data.unifyqrcode);
                $("#qrcode canvas").removeAttr("style");
                $("#qrcode img").css("display","none")
            },
            error: function(xml, errstr, err) {
                alert(errstr+'，获取数据失败！');
            }
        });
    }

    $(function (){
        if (!window.h5sdk) {
            console.log("invalid h5sdk");
        }
        else{
            window.h5sdk.config({
                appId: '{$parameters.appid}',
                timestamp: {$parameters.timestamp},
                nonceStr: '{$parameters.noncestr}',
                signature: '{$parameters.signature}',
                jsApiList: [
                    "tt.getSystemInfo",
                    "tt.showActionSheet",
                    "tt.previewImage",
                    "tt.showToast"
                ],
                //鉴权成功回调
                onSuccess: (res) => {
                    console.log(`config success: ${JSON.stringify(res)}`);
                },
                //鉴权失败回调
                onFail: (err) => {
                    console.log(`config failed: ${JSON.stringify(err)}`);
                },
            });
            window.h5sdk.ready(() => {
                tt.setScreenBrightness({
                    "value": 1,
                    success(res) {
                        console.log(JSON.stringify(res));
                    },
                    fail(res) {
                        console.log(`setScreenBrightness fail: ${JSON.stringify(res)}`);
                    }
                });
            });
        }
        makeCode();
        $("#qrcode canvas").removeAttr("style");
        $("#qrcode img").css("display","none");
        var timerID = 0;
        var timeroutID = 0;
        $(".qdqrcode").on('click',function (){
            makeCode();
            $(".overflow").fadeIn(100);
            timerID = setInterval(function(){
                refreshCode();
            }, 30000);
            timeroutID = setTimeout(function(){
                $('.overflow').hide();
                clearInterval(timerID);
            }, 300000);
        });
        $(".refresh").on('click',function (){
            refreshCode();
        });
        $(".close").on('click',function (){
            $('.overflow').hide();
            clearInterval(timerID);
            clearInterval(timeroutID);
        });
    });
</script>
</html>